<template>
    <div class="flex items-center">
        <div style="width: 8%;">当前位置：</div>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item v-for="(item, i) in breadcrumbList" :key="i">
                <span :class="{ activeBtrad: item.path !== activeMenuIndex }" @click="bread(item)">
                    {{ item.name }}
                </span>
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>
  
<script>
// import Item from "@/components/breadcrumb/breadcrumb-item.vue";

export default {
    name: "Breadcrumb",
    // components: {
    //     Item
    // },
    data() {
        return {
            breadcrumbList: {},
            activeMenuIndex: "null"
        };
    },
    created() {
        this.breadcrumbList = this.$store.state.breadcrumbList;
        this.activeMenuIndex = this.$store.state.activeMenuIndex
        console.log("面包屑数据1", this.breadcrumbList);
    },

    watch: {
        '$store.state.breadcrumbList'(val) {
            this.breadcrumbList = val
            this.activeMenuIndex = this.$store.state.activeMenuIndex
            console.log("面包屑数据2", this.breadcrumbList);
        }
    },
    methods: {
        bread(obj) {
            obj.path !== this.activeMenuIndex && this.$router.push({
                path: obj.path
            })
        }

    }
};
</script>
  
<style lang="scss" scoped>
.breadcrumb {
    height: 22px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    width: 100%;

    .el-breadcrumb {
        // width: 100%;

    }

    .activeBtrad {
        font-weight: 600;
        color: #0170FE;
        cursor: pointer;
    }

    .isMenu {}
}
</style>
  